
/**
 * 通过Ajax技术异步获取数据，填充到页面指定区域
 */

(function fetchData() {
    //日期处理
    /**
     * 日期格式：09/01
     * 日期处理：扩展可以考虑使用pattern  yyyy/MM/dd
     * @param {Number} ms - 毫秒
     * @returns {String}
     */
    function getDate(ms) {
      let format = new Date(ms);
      let month = (format.getMonth() + 1).toString().padStart(2, "0");
      let date = format.getDate().toString().padStart(2, "0");
      return `${month}-${date}`;
    }
    // 标题处理  超过指定长度，采用... 替代
    // 在现代编程语言中文和英文长度是一样的
    // 页面显示长度：中文2个字节，英文1个字节
    /**
     * 标题处理
     * @param {String} str 
     * @param {Number} displayLen 
     * @returns {String}
     */
    function cutString(str, displayLen) {
      if (str.length * 2 <= displayLen) {
        return str;
      }
  
      //按显示字节计数
      let strlen = 0;
      let s = "";
      // 字符长度*2 比 显示长度要多，则需处理生成...
      // 判断是不是ASCII码
      for (let i = 0; i < str.length; i++) {
        s += str.charAt(i);
        if (str.charCodeAt(i) > 128) {//非ASCII码
          strlen += 2;
          if (strlen >= displayLen) {
            return s.substring(0, s.length - 1) + "...";
          }
        } else {
          strlen += 1;
          if (strlen >= displayLen) {
            return s.substring(0, s.length - 2) + "...";
          }
        }
      }
  
      return s;
    }
  
    // 采用原生XMLHttpRequest的对象进行Ajax技术处理数据 --> Axios
    // Axios库适用于浏览器端、服务端、桌面端
    let target = document.querySelector(".list-all ul:last-of-type");
    target.innerHTML = ""; //清除原有数据
    //数据源：Java Web Servlet & Mock.js & JSONSever
    let url = "db.json";
    let xhr = new XMLHttpRequest(); // 默认异步处理
    xhr.open("get", url); //创建链接
    xhr.send(); //发送请求
    xhr.onload = function () {
      //http status code ：  20x 30x  ||  40x 50x
      if (xhr.status === 200) {
        let res = JSON.parse(xhr.responseText);
        console.log("total -->", res.total);
        /**@type {Array} */
        let data = res.news;
        for (let i = 0; i < data.length; i++) {
          target.innerHTML += `
          <li> \n
             <a href="#" title=${data[i].title}>${cutString(
            data[i].title,
            50
          )}</a>\n
             [${getDate(data[i].date)}]\n
          </li>\n
          `;
        }
      }
    };
    xhr.onerror = function () {
      //提示框：模态框 modal
      console.error("数据获取错误!请联系系统管理员");
    };
  })();
  
